<template>
  <div class="admin">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>管理员面板</span>
        </div>
      </template>

      <div v-if="userInfo?.role === 'admin'">
        <el-alert
          title="管理员权限验证通过"
          type="success"
          description="您已成功访问管理员面板，这表明路由权限控制正常工作。"
          show-icon
        />

        <div style="margin-top: 20px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>用户管理</span>
                  </div>
                </template>
                <div>管理用户账户和权限</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>系统设置</span>
                  </div>
                </template>
                <div>配置系统参数和选项</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>日志查看</span>
                  </div>
                </template>
                <div>查看系统操作日志</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <div v-else>
        <el-alert
          title="权限不足"
          type="error"
          description="您没有访问此页面的权限，请使用管理员账户登录。"
          show-icon
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 获取用户信息
const userInfo = computed(() => {
  const userInfoStr = localStorage.getItem('userInfo')
  return userInfoStr ? JSON.parse(userInfoStr) : null
})
</script>

<style scoped>
.admin {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin-bottom: 20px;
}
</style>
